<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://cdn.vip.hfjy.com/newtpl/static/css/swiper.min.css?v=1.0.2" rel="stylesheet">

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
    <script src="http://cdn.vip.hfjy.com/newtpl/static/js/jquery.swiper.min.js?v=1.0.2"></script>
    <style>
        .pagination {
            position: absolute;
            left: 0;
            text-align: center;
            bottom: .1rem;
            width: 100%;
            z-index: 98;
        }
    </style>
    <script>
        $(function(){
            $(".switch" ).click(function(){
                $(this ).fadeOut().siblings('.switch' ).stop().fadeIn()
            })
            var mySwiper1 = new Swiper('#banner',{
                loop: true,
                autoplay:5000,
                speed:1000,
                pagination: '#bannerpagination',
                paginationClickable: true,
                grabCursor : true,
                parallax:true,
                prevButton:'.left',
                nextButton:'.right',
            });
        })

    </script>
</head>
<body style="background: #EFEFEF;">
  <div class="container">
    <div style="background: #fff;">
        <div class="wx01-title overflow">
            <div class="clear">我的订阅</div>
            <div class="button">高速路况</div>
            <div class="button">视频截图</div>
        </div>
        <ul class="wx01-banner" style="margin: 15px 0px;">
        <li>
            <img class="pic" src="images/01.png"/>
            <div class="middle">
                <p class="title">G5二广高速</p>
                <p class="sub-title">沙坪坝-上行(出城)</p>
                <p class="time">09:00</p>
                <p class="week sub-title">周一周二周五</p>
            </div>
            <div class="operte" style="float: right;">
                <div class="button-group">
                    <img class="button-close switch" style="width: 30%;display: none;" src="images/01-button-close.png"/>
                    <img class="button-open switch" style="width: 30%;" src="images/01-button-open.png"/>
                    <img class="button-01" style="width: 80%;float: right;" src="images/01-button.png"/>
                </div>
                <img style="width: 24%;float: right;margin-top: 28px;" src="images/01-del.png"/>
            </div>
        </li>
        <li>
            <img class="pic" src="images/01.png"/>
            <div class="middle">
                <p class="title">G5二广高速</p>
                <p class="sub-title">沙坪坝-上行(出城)</p>
                <p class="time">09:00</p>
                <p class="week sub-title">周一周二周五</p>
            </div>
            <div class="operte" style="float: right;">
                <div class="button-group">

                    <img class="button-close switch" style="width: 30%;" src="images/01-button-close.png"/>
                    <img class="button-open switch" style="width: 30%;display: none;" src="images/01-button-open.png"/>
                    <img class="button-01" style="width: 80%;float: right;" src="images/01-button.png"/>
                </div>
                <img style="width: 24%;float: right;margin-top: 28px;" src="images/01-del.png"/>
            </div>
        </li>
        <li>
            <img class="pic" src="images/01.png"/>
            <div class="middle">
                <p class="title">G5二广高速</p>
                <p class="sub-title">沙坪坝-上行(出城)</p>
                <p class="time">09:00</p>
                <p class="week sub-title">周一周二周五</p>
            </div>
            <div class="operte" style="float: right;">
                <div class="button-group">

                    <img class="button-close switch" style="width: 30%;" src="images/01-button-close.png"/>
                    <img class="button-open switch" style="width: 30%;display: none" src="images/01-button-open.png"/>
                    <img class="button-01" style="width: 80%;float: right;" src="images/01-button.png"/>
                </div>
                <img style="width: 24%;float: right;margin-top: 28px;" src="images/01-del.png"/>
            </div>
        </li>
    </ul>
    </div>
    <div style="background: #fff;margin-top: 15px;" class="overflow">
        <div class="wx01-title overflow">
            <div class="clear">我的收藏</div>
            <div class="text">
                <a>
                    <img class="left" src="images/01-banner-left-jiantou.png">
                </a>可左右滑动查看图片 <a>
                <img class="right" src="images/01-banner-right-jiantou.png">
            </a></div>
        </div>
        <div style="margin-top: 15px;" id="banner" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide ">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div id="bannerpagination" class="pagination "></div>-->
        </div>
    </div>
      <div class="wx01-third">
          <span>
              <img style="width: 22%" src="images/01erweima.png">
          </span>
          <span>
              <img style="width: 29%" src="images/01-foot-center.png">
          </span>
          <span>
              <img style="width: 30%" src="images/01-foot-right.png">
          </span>
      </div>

  </div>
</body>
</html>